<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="名字" :label-width="formLabelWidth" prop="name">
                <el-input
                        v-model="form.name"
                        autocomplete="off"
                        placeholder="请输入名字"
                ></el-input>
            </el-form-item>
            <el-form-item label="上级编码" :label-width="formLabelWidth" >

              <el-select v-model="form.parentId" clearable placeholder="请选择">
                <el-option :label="selParent.label" :value="selParent.id">
                  <el-tree
                      :data="allParents"
                      :props="{label: 'name', // 显示名称
                            children: 'children', // 子级字段名
                        }"
                      accordion
                      highlight-current
                      @node-click="handleNodeClick"
                  ></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
            <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { temptreeInfo, temptreeSave, temptreeEdit } from "@/api/temp/temptree.js";
    
    
    export default {
        props: ["allParents"],
        data() {
            return {
                visible: false,
                selParent:{
                  id: "",
                  label: "",
                },
                form: {
                    name:"",
                    parentId:"",
                },
                formLabelWidth: "120px",
                rules: {
                },
            };
        },
        created() {
        },
        methods: {
            init(id) {
                this.resetForm();
                //修改
                if (id) {
                    temptreeInfo(id).then((resp) => {
                        if (resp.code == 0) {
                            this.$nextTick(() => {
                                this.form = {
                                    ...this.form,
                                    ...resp.data,
                                };
                              if (this.form.parentId) {
                                this.findParentCode(this.form.parentId, this.allParents)
                              }
                            });
                        } else {
                            this.$msg({
                                message: resp.msg,
                                type: "error",
                            });
                        }
                    });
                }
                this.visible = true;
            },
            //提交表单数据
            submitForm() {
                this.$refs["form"].validate((valid) => {
                if (valid) {
                    //修改
                    if (this.form.id) {
                        if (this.form.id == this.form.parentId) {
                            this.$msg({
                                message: "不允许将本节点选为上级节点",
                                type: "error",
                            });
                            return;
                        }
                        temptreeEdit(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                            this.$emit("refreshData");
                            this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    //新增
                    } else {
                        temptreeSave(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                                this.$emit("refreshData");
                                this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
                });
            },
            resetForm() {
                this.form = {
                    name:"",
                    parentId:"",
                };
                this.$nextTick(() => {
                    if (this.$refs["form"]) {
                        this.$refs["form"].resetFields();
                    }
                });
            },
            //查找父节点
            findParentCode(parentId, dataScope) {
              dataScope.forEach(m => {
                if (parentId == m.id) {
                  this.selParent.id = m.id
                  this.selParent.label = m.name
                  return
                } else if (m.children) {
                  this.findParentCode(parentId, m.children)
                }
              })
            },
            //树形菜单展示
            handleNodeClick(data) {
              this.selParent.id = data.id
              this.selParent.label = data.name
              this.form.parentId = data.id
            },
        },
    };
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 7px;
        overflow: hidden;
        overflow-y: auto;
        font-weight: normal;
    }
</style>
